<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>违法信息录入</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-form .layui-form-item .layui-input-block tip {
            display: inline-block;
            margin-top: 10px;
            line-height: 10px;
            font-size: 10px;
            color: #a29c9c;
        }
        .layui-form .layui-upload-img {
            width: 95px;
            height: 40px;
        }
        /* .layui-form .layui-upload-list {
            margin: 10px 25px;
            display: inline-block;
        } */
        #area-picker .layui-input-block {margin-bottom: 15px;}
        body form {font-size: 100%;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote layui-text">
            注意：需要通过工作人员手动录入新添加的设备信息
        </blockquote>
        
        <form class="layui-form" action="">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>基本信息录入</legend>
            </fieldset>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" placeholder="" value="" class="layui-input id">
                            <tip>系统自动生成</tip>
                        </div>
                    </div>
                    <div class="layui-form-item" id="area-picker">
                        <label class="layui-form-label">所处地点</label>
                        <div class="layui-input-block">
                            <div class="layui-input-inline" style="width: 160px;">
                                <select name="province" class="province-selector" data-value="湖南省" lay-filter="province-1"><option value="">--选择省--</option><option value="北京市">北京市</option><option value="天津市">天津市</option><option value="河北省">河北省</option><option value="山西省">山西省</option><option value="内蒙古自治区">内蒙古自治区</option><option value="辽宁省">辽宁省</option><option value="吉林省">吉林省</option><option value="黑龙江省">黑龙江省</option><option value="上海市">上海市</option><option value="江苏省">江苏省</option><option value="浙江省">浙江省</option><option value="安徽省">安徽省</option><option value="福建省">福建省</option><option value="江西省">江西省</option><option value="山东省">山东省</option><option value="河南省">河南省</option><option value="湖北省">湖北省</option><option value="湖南省">湖南省</option><option value="广东省">广东省</option><option value="广西壮族自治区">广西壮族自治区</option><option value="海南省">海南省</option><option value="重庆市">重庆市</option><option value="四川省">四川省</option><option value="贵州省">贵州省</option><option value="云南省">云南省</option><option value="西藏自治区">西藏自治区</option><option value="陕西省">陕西省</option><option value="甘肃省">甘肃省</option><option value="青海省">青海省</option><option value="宁夏回族自治区">宁夏回族自治区</option><option value="新疆维吾尔自治区">新疆维吾尔自治区</option><option value="台湾省">台湾省</option><option value="香港特别行政区">香港特别行政区</option><option value="澳门特别行政区">澳门特别行政区</option><option value="海外">海外</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择省--" value="广东省" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择省--</dd><dd lay-value="北京市" class="">北京市</dd><dd lay-value="天津市" class="">天津市</dd><dd lay-value="河北省" class="">河北省</dd><dd lay-value="山西省" class="">山西省</dd><dd lay-value="内蒙古自治区" class="">内蒙古自治区</dd><dd lay-value="辽宁省" class="">辽宁省</dd><dd lay-value="吉林省" class="">吉林省</dd><dd lay-value="黑龙江省" class="">黑龙江省</dd><dd lay-value="上海市" class="">上海市</dd><dd lay-value="江苏省" class="">江苏省</dd><dd lay-value="浙江省" class="">浙江省</dd><dd lay-value="安徽省" class="">安徽省</dd><dd lay-value="福建省" class="">福建省</dd><dd lay-value="江西省" class="">江西省</dd><dd lay-value="山东省" class="">山东省</dd><dd lay-value="河南省" class="">河南省</dd><dd lay-value="湖北省" class="">湖北省</dd><dd lay-value="湖南省" class="">湖南省</dd><dd lay-value="广东省" class="layui-this">广东省</dd><dd lay-value="广西壮族自治区" class="">广西壮族自治区</dd><dd lay-value="海南省" class="">海南省</dd><dd lay-value="重庆市" class="">重庆市</dd><dd lay-value="四川省" class="">四川省</dd><dd lay-value="贵州省" class="">贵州省</dd><dd lay-value="云南省" class="">云南省</dd><dd lay-value="西藏自治区" class="">西藏自治区</dd><dd lay-value="陕西省" class="">陕西省</dd><dd lay-value="甘肃省" class="">甘肃省</dd><dd lay-value="青海省" class="">青海省</dd><dd lay-value="宁夏回族自治区" class="">宁夏回族自治区</dd><dd lay-value="新疆维吾尔自治区" class="">新疆维吾尔自治区</dd><dd lay-value="台湾省" class="">台湾省</dd><dd lay-value="香港特别行政区" class="">香港特别行政区</dd><dd lay-value="澳门特别行政区" class="">澳门特别行政区</dd><dd lay-value="海外" class="">海外</dd></dl></div>
                            </div>
                            <div class="layui-input-inline" style="width: 160px;">
                                <select name="city" class="city-selector" data-value="长沙市" lay-filter="city-1"><option value="">--选择市--</option><option value="广州市">广州市</option><option value="韶关市">韶关市</option><option value="深圳市">深圳市</option><option value="珠海市">珠海市</option><option value="汕头市">汕头市</option><option value="佛山市">佛山市</option><option value="江门市">江门市</option><option value="湛江市">湛江市</option><option value="茂名市">茂名市</option><option value="肇庆市">肇庆市</option><option value="惠州市">惠州市</option><option value="梅州市">梅州市</option><option value="汕尾市">汕尾市</option><option value="河源市">河源市</option><option value="阳江市">阳江市</option><option value="清远市">清远市</option><option value="东莞市">东莞市</option><option value="中山市">中山市</option><option value="潮州市">潮州市</option><option value="揭阳市">揭阳市</option><option value="云浮市">云浮市</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择市--" value="深圳市" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择市--</dd><dd lay-value="广州市" class="">广州市</dd><dd lay-value="韶关市" class="">韶关市</dd><dd lay-value="深圳市" class="layui-this">深圳市</dd><dd lay-value="珠海市" class="">珠海市</dd><dd lay-value="汕头市" class="">汕头市</dd><dd lay-value="佛山市" class="">佛山市</dd><dd lay-value="江门市" class="">江门市</dd><dd lay-value="湛江市" class="">湛江市</dd><dd lay-value="茂名市" class="">茂名市</dd><dd lay-value="肇庆市" class="">肇庆市</dd><dd lay-value="惠州市" class="">惠州市</dd><dd lay-value="梅州市" class="">梅州市</dd><dd lay-value="汕尾市" class="">汕尾市</dd><dd lay-value="河源市" class="">河源市</dd><dd lay-value="阳江市" class="">阳江市</dd><dd lay-value="清远市" class="">清远市</dd><dd lay-value="东莞市" class="">东莞市</dd><dd lay-value="中山市" class="">中山市</dd><dd lay-value="潮州市" class="">潮州市</dd><dd lay-value="揭阳市" class="">揭阳市</dd><dd lay-value="云浮市" class="">云浮市</dd></dl></div>
                            </div>
                            <div class="layui-input-inline" style="width: 160px;">
                                <select name="county" class="county-selector" data-value="天心区" lay-filter="county-1"><option value="">--选择区--</option><option value="罗湖区">罗湖区</option><option value="福田区">福田区</option><option value="南山区">南山区</option><option value="宝安区">宝安区</option><option value="龙岗区">龙岗区</option><option value="盐田区">盐田区</option><option value="龙华区">龙华区</option><option value="坪山区">坪山区</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择区--" value="龙岗区" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择区--</dd><dd lay-value="罗湖区" class="">罗湖区</dd><dd lay-value="福田区" class="">福田区</dd><dd lay-value="南山区" class="">南山区</dd><dd lay-value="宝安区" class="">宝安区</dd><dd lay-value="龙岗区" class="layui-this">龙岗区</dd><dd lay-value="盐田区" class="">盐田区</dd><dd lay-value="龙华区" class="">龙华区</dd><dd lay-value="坪山区" class="">坪山区</dd></dl></div>
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <input type="text" name="" placeholder="请选择所属交警大队行政区划" autocomplete="off" class="layui-input" id="my-area">
                        </div>
                        <div class="layui-input-block">
                            <input type="text" name="" placeholder="选择具体路口位置" autocomplete="off" class="layui-input" id="cur-cross">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备类型</label>
                        <div class="layui-input-block">
                            <input type="text" name=""  lay-reqtext="设备类型不能为空！" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备IP</label>
                        <div class="layui-input-block">
                            <input type="text" name=""  lay-reqtext="设备IP不能为空！" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="ifToday" value="正常" title="正常" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>正常</div></div>
                            <input type="radio" name="ifToday" value="未启用" title="未启用"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>未启用</div></div>
                        </div>
                    </div>
                    
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">设备外形图</label>
                        <div class="layui-input-block">
                            <div class="layui-upload license-upload">
                                <button type="button" class="layui-btn" id="license-upload-btn">上传图片</button>
                                <input class="layui-upload-file" type="file" accept="" name="file">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="license-pic">
                                    <p id="demoText"></p>
                                </div>
                                <div style="width: 95px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="license-bar">
                                    <div class="layui-progress-bar" lay-percent=""><span class="layui-progress-text"></span></div>
                                </div>
                                </div>
                            </div>
                            <input type="hidden" name=""  lay-reqtext="请上传设备外形图！" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div> -->
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>补充信息录入：设备外形图上传</legend>
            </fieldset>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div id="zyupload" class="zyupload"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/jq-module/zyupload/zyupload-1.0.0.js" charset="utf-8"></script>

<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "100%",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "https://httpbin.org/post",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append('<p style="color:#1aa094">上传成功！</p>');
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
    });
</script>

<script>
    var comps = ['form', 'layedit', 'laydate', 'upload', 'element', 'layarea', 'tableSelect'];
    layui.use(comps, function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.$,
            upload = layui.upload,
            element = layui.element,
            layarea = layui.layarea,
            tableSelect = layui.tableSelect;

        // 自动生成一个编号
        var ranId = (function (minNum, maxNum){ // 生成从minNum到maxNum的随机数
            switch(arguments.length){ 
                case 1: 
                    return parseInt(Math.random()*minNum+1,10); 
                    break; 
                case 2: 
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
                    break; 
                default: return 0; break; 
            } 
        })(60000, 80000);
        $('.id').val(ranId);

        laydate.render({
            elem: '#time', type: 'datetime',
            format: 'yyyy-MM-dd HH:mm'
        });

        // 常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#license-upload-btn',
            url: 'https://httpbin.org/post',
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    // console.log(result);
                    $('#license-pic').attr('src', result); // 图片链接（base64）
                });

                element.progress('license-bar', '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 如果上传失败
                // if (res.code > 0) {
                //     return layer.msg('上传失败');
                // }
                // 如果上传成功
                layer.msg('上传成功');
                $('#demoText').html(''); // 置空上传失败的状态
            },
            // error: function () {
            //     //演示失败状态，并实现重传
            //     var demoText = $('#demoText');
            //     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            //     demoText.find('.demo-reload').on('click', function () {
            //         uploadInst.upload();
            //     });
            // },
            //进度条
            progress: function (n, elem, e) {
                element.progress('license-bar', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

        layarea.render({
            elem: '#area-picker',
            data: {
                province: '湖南省',
                city: '长沙市',
                county: '天心区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });

        /**
         * 所属交警大队、路口位置的下拉选取
         **/
        tableSelect.render({
            elem: '#my-area',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/areaSelect.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'username', title: '交警大队' },
                    { field: 'addr', title: '地址' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.username)
                })
                elem.val(NEWJSON.join(","))
            }
        });
        tableSelect.render({
            elem: '#cur-cross',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/cross.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'addr', title: '地址' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.addr)
                })
                elem.val(NEWJSON.join(","))
            }
        });

        form.on('submit(demo1)', function (data) {
            layer.alert('数据信息已被收录进入设备信息数据库！', { title: '提交成功' }, function (){
                location.reload();
            });
            return false;
        });
    });
</script>

</body>
</html>